<template>
	<view>
		<z-paging-swiper>
			<swiper-tab :tab-list="tabList" slot="top" :tabClass="courseListCls" :tabIndex.sync="current" @change="tabsChange"></swiper-tab>
			<swiper class="swiper" :current="current" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="item.id">
					<template v-if="item.value == 'gl'">
						<scroll-view class="relationWrap" scroll-y scroll-x>
							<view class="item" v-for="item in treeData" :key="item.id">
								<view class="nodePar">
									<image mode="widthFix" class="treePar" src="../../../static/images/zhuxue/treeIcon.png"></image>
									<text>{{item.text}}</text>
								</view>
								<relation-res :isSecond="true" v-if="item.children && item.children.length" :treeData="item.children"></relation-res>
							</view>
						</scroll-view>
					</template>
					<template v-else>
						<answer-list :tabIndex="index" :currRole="currRole"  :currentIndex="current" :loreTypeName="loreTypeName" :studyLogId="studyLogId" :loreId="loreId"></answer-list> 
					</template>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	import { getStudyLogDetail } from '@/api/zhuxue'
	import AnswerList from './components/AnswerList';
	import RelationRes from './components/RelationRes';
	export default {
		components:{
			AnswerList,
			RelationRes
		},
		data() {
			return {
				tabList:[
					{value:'zdx',name:'针对性诊断结果'},
					{value:'zc',name:'再次诊断结果'},
					{value:'gg',name:'巩固训练结果'},
					{value:'gl',name:'关联诊断结果'}
				],
				current: 0,
				courseListCls:'courseListTab',
				studyLogId:'',
				loreId:'',
				loreTypeName:'zdx',
				treeData:[],
				isLoadGlFlag:true,
				currRole:'',
				stuName:''
			}
		},
		onLoad(options){
			let title = '';
			this.studyLogId = String(options.studyLogId);
			this.currRole = options.currRole;
			this.loreId = String(options.loreId);
			if(this.currRole != 'stu'){
				this.stuName = options.stuName;
				title = `【${this.stuName}】-【${ options.loreName}】答卷详情`;
			}else{
				title = options.loreName + '答卷详情';
			}
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title
				})
			},100)
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
				this.loreTypeName = this.tabList[index].value;
			},
			//swiper滑动结束
			animationfinish(e) {
				this.current = e.detail.current;
				this.loreTypeName = this.tabList[this.current].value;
				if(this.loreTypeName == 'gl' && this.isLoadGlFlag){
					this.isLoadGlFlag = false;
					this.loadStudyLogDetail();
				}
			},
			loadStudyLogDetail(){
				const params = {
					studyLogId:this.studyLogId,
					loreId:this.loreId,
					loreTypeName:this.loreTypeName,
					pageNo: 1,
					limit: 10000
				};
				let contentStr = this.crypto.encrypt(JSON.stringify( params ));
				getStudyLogDetail({content:contentStr}).then(res=>{
					this.treeData = res.data.datas.sdList;
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.relationWrap{
		position: absolute;
		left: 0;
		right: 0;
		top: 20rpx;
		bottom: 0rpx;
		padding: 0 20rpx;
		background: #fff;
		.nodePar{
			color: $pss-text-color3;
			font-weight: bold;
			display: flex;
			align-items: center;
			@include respTo(phone){
				height: 65rpx;
				font-size: $font-size32;
			}
			@include respTo(pad){
				height: 50rpx;
				font-size: $padSize18;
			}
			.treePar{
				@include respTo(phone){
					width: 36rpx;
				}
				@include respTo(pad){
					width: 20rpx;
				}
				margin-right: 10rpx;
			}
		}
	}
	.swiper {
		height: 100%;
	}
</style>
